<template>
  <div>
    <!-- 侧边栏 -->
    <div class="c">
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="vertical"
        background-color="#b71c1c"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="1">管理中心</el-menu-item>
        <el-submenu index="2">
          <template slot="title">商品管理</template>
          <el-menu-item index="2-1" @click="jf">肌肤之钥</el-menu-item>
          <el-menu-item index="2-2" @click="sl">圣罗兰</el-menu-item>
          <el-menu-item index="2-3" @click="tf">汤姆福特</el-menu-item>
          <el-menu-item index="2-4" @click="da">迪奥</el-menu-item>
          <el-menu-item index="2-5" @click="xn">香奈儿</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">订单管理</template>
          <el-menu-item index="3-1" @click="ding">顾客订单</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">用户管理</template>
          <el-menu-item index="4-1" @click="user">用户信息</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <!-- 退出登录 -->
    <div class="td" @click="td">退出登录</div>
    <!-- 首页 -->
    <div class="sy" @click="sy">首页</div>
    <!-- 图片 -->
    <div class="imag">
      <img src="../assets/img/20.png" width="100%" alt="" />
    </div>
    <!-- 显示内容区 -->
    <div class="a">
      <!-- 图片-->
      <div class="img" v-if="flag7">
        <img src="../assets/img/21.png" width="100%" height="560px" alt="" />
      </div>
      <!-- 更改价格 -->
      <div class="price" v-if="flag3">
        <input
          type="text"
          v-model="update.price"
          class="ipt"
          placeholder="请输入价格"
        />
        <div class="sure" @click="sur">确定</div>
        <div class="no" @click="no">取消</div>
      </div>
      <!-- 渲染商品 -->
      <div class="f1" v-if="flag4">
        <table cellspacing="0">
          <tr>
            <th>商品品牌</th>
            <th>商品型号</th>
            <th>商品价格</th>
            <th>操作</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item, index) in list" :key="item.index">
            <td>{{ item.logo }}</td>
            <td>{{ item.model }}</td>
            <td>￥{{ item.price }}</td>
            <td class="upd"><Upd :id="item.id" @getid="get_id"></Upd></td>
            <td class="upd">
              <Del :index="index" :id="item.id" @del="delt"></Del>
            </td>
          </tr>
        </table>
      </div>
      <!-- 顾客订单渲染区 --> 
      <div class="f2" v-if="flag5">
        <table cellspacing="0">
          <tr>
            <th>姓名</th>
            <th>电话</th>
            <th>收货地址</th>
            <th>购买商品</th>
            <th>操作</th>
          </tr>
          <tr v-for="item in list" :key="item.index">
            <td>{{ item.username }}</td>
            <td>{{ item.tel }}</td>
            <td>{{ item.place }}</td>
            <td>{{ item.goods }}</td>
            <td class="upd"><Send :id="item.id" @fsong="fh"></Send></td>
          </tr>
        </table>
      </div>
      <!-- 用户管理渲染区 -->
      <div class="f3" v-if="flag6">
        <table cellspacing="0">
          <tr>
            <th>性名</th>
            <th>电话</th>
            <th>出生日期</th>
            <th>性别</th>
            <th>收货地址</th>
            <th>操作</th>
          </tr>
          <tr v-for="item in list" :key="item.index">
            <td>{{ item.username }}</td>
            <td>{{ item.tel }}</td>
            <td>{{ item.date }}</td>
            <td>{{ item.sex }}</td>
            <td>{{ item.place }}</td>
            <td class="upd"><Del2 :id="item.id" @uid="shc"></Del2></td>
          </tr>
        </table>
      </div>
      <!-- 添加商品 -->
      <div class="b" @click="add" v-if="flag2">添加商品</div>
      <div class="d" v-if="flag">
        <div class="e" @click="sub">取消</div>
        <el-form
          class="form"
          ref="formRef"
          label-width="80px"
          :model="shop"
          status-icon
          :rules="rules"
        >
          <el-form-item label="选择品牌" prop="logo">
            <el-radio-group v-model.trim="shop.logo">
              <el-radio-button label="肌肤之钥"></el-radio-button>
              <el-radio-button label="圣罗兰"></el-radio-button>
              <el-radio-button label="汤姆福特"></el-radio-button>
              <el-radio-button label="迪奥"></el-radio-button>
              <el-radio-button label="香奈儿"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="商品型号" prop="model">
            <el-input v-model.trim="shop.model"></el-input>
          </el-form-item>
          <el-form-item label="商品单价" prop="price">
            <el-input v-model.trim="shop.price"></el-input>
          </el-form-item>
          <el-form-item label="商品图片">
            <el-upload
              class="upload-demo"
              action="http://127.0.0.1:3007/api/upload"
              ref="upload"
              :file-list="filelist"
              :auto-upload="false"
              :on-success="handleSuccess"
              :limit="1"
            >
              <el-button slot="trigger" size="small" type="primary"
                >选取文件</el-button
              >
              <el-button
                style="margin-left: 10px"
                size="small"
                type="success"
                @click="submitUpload"
                >上传到服务器</el-button
              >
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且只能上传一张不超过500kb
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item class="btn">
            <el-button type="danger" @click="reg">确定添加</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Del from "./Del.vue";
import Upd from "./Upd.vue";
import Send from "./Send.vue";
import Del2 from "./Del2.vue";
export default {
  components: {
    Del,
    Upd,
    Send,
    Del2,
  },
  data() {
    return {
      // 存储品牌名字
      logo: {
        name: "",
      },
      // 存储商品信息数组
      list: [],
      // 存储图片数组
      filelist: [],
      // 侧边导航栏
      activeIndex: "1",
      activeIndex2: "1",

      // 控制添加商品表单的显示与隐藏
      flag: false,
      // 控制添加商品按钮的显示与隐藏
      flag2: false,
      // 控制更改商品价格的显示与隐藏
      flag3: false,
      // 控制渲染商品区的显示与隐藏
      flag4: false,
      // 控制顾客订单的显示与隐藏
      flag5: false,
      // 控制用户管理的显示与隐藏
      flag6: false,
      // 控制图片的显示与隐藏
      flag7: true,
      // 更改价格
      update: {
        id: "",
        price: "",
      },
      // 删除商品
      delte: {
        id: "",
      },
      // 发货
      fhuo: {
        id: "",
      },
      // 删除用户
      users: {
        id: "",
      },
      // 添加的商品数据
      shop: {
        logo: "",
        model: "",
        price: "",
        imgurl: "",
        count: 0,
        state: false,
      },

      // 验证规则
      rules: {
        // logo验证
        logo: [
          {
            required: true,
            message: "请选择品牌！",
            trigger: "blur",
          },
        ],

        // model验证
        model: [
          {
            required: true,
            message: "请输入型号！",
            trigger: "blur",
          },
        ],

        // 价格验证
        price: [
          {
            required: true,
            message: "请输入商品价格！",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 点击添加图片按钮显示表单
    add() {
      this.flag = true;
    },

    //  退出登录
    td() {
      window.sessionStorage.clear();
      this.$router.push("/home2");
    },

    // 首页
    sy() {
      this.$router.push("/home2");
    },

    // 顾客订单
    async ding() {
      this.flag5 = true;
      this.flag4 = false;
      this.flag6 = false;
      this.flag2 = false;
      this.flag7 = false;
      const { data: res } = await this.$http.post("/car3");
      this.list = res.message;
    },

    // 点击导航栏显示对应商品信息
    // 肌肤之钥
    async jf() {
      this.flag2 = true;
      this.flag4 = true;
      this.flag5 = false;
      this.flag6 = false;
      this.flag7 = false;
      this.logo.name = "肌肤之钥";
      const { data: res } = await this.$http.post("/search3", this.logo);
      this.list = res.message;
    },
    // 圣罗兰
    async sl() {
      this.flag2 = true;
      this.flag4 = true;
      this.flag5 = false;
      this.flag6 = false;
      this.flag7 = false;
      this.logo.name = "圣罗兰";
      const { data: res } = await this.$http.post("/search3", this.logo);
      this.list = res.message;
    },
    // 汤姆福特
    async tf() {
      this.flag2 = true;
      this.flag4 = true;
      this.flag5 = false;
      this.flag6 = false;
      this.flag7 = false;
      this.logo.name = "汤姆福特";
      const { data: res } = await this.$http.post("/search3", this.logo);
      this.list = res.message;
    },
    //  迪奥
    async da() {
      this.flag2 = true;
      this.flag4 = true;
      this.flag5 = false;
      this.flag6 = false;
      this.flag7 = false;
      this.logo.name = "迪奥";
      const { data: res } = await this.$http.post("/search3", this.logo);
      this.list = res.message;
    },
    // 香奈儿
    async xn() {
      this.flag2 = true;
      this.flag4 = true;
      this.flag5 = false;
      this.flag6 = false;
      this.flag7 = false;
      this.logo.name = "香奈儿";
      const { data: res } = await this.$http.post("/search3", this.logo);
      this.list = res.message;
    },

    // 更改价格
    get_id(e) {
      this.flag3 = true;
      this.update.id = e;
    },
    async sur() {
      const { data: res } = await this.$http.post("/search4", this.update);
      if (res.status === 200) this.$message.success("更改成功！");
      this.flag3 = false;
      window.location.reload();
    },
    no() {
      this.flag3 = false;
    },

    // 删除商品
    async delt(e) {
      this.delte.id = e;
      const { data: res } = await this.$http.post("/delete", this.delte);
      if (res.status === 200) this.$message.success("删除成功！");
      window.location.reload();
    },

    //  发货
    async fh(e) {
      this.fhuo.id = e;
      const { data: res } = await this.$http.post("/car4", this.fhuo);
      if (res.status === 200) this.$message.success("发货成功！");
      window.location.reload();
    },

    //  用户管理
    async user() {
      this.flag6 = true;
      this.flag5 = false;
      this.flag4 = false;
      this.flag2 = false;
      this.flag7 = false;
      const { data: res } = await this.$http.post("/search5");
      this.list = res.message;
    },

    //  删除用户
    async shc(e) {
      this.users.id = e;
      const { data: res } = await this.$http.post("/delete2", this.users);
      if (res.status === 200) this.$message.success("删除成功！");
      window.location.reload();
    },

    // 点击取消按钮
    sub() {
      this.flag = false;
    },

    // 图片上传

    // 上传成功后
    handleSuccess(res) {
      // 判断是否有地址
      if (res.url) {
        this.shop.imgurl = res.url.replace("upload", "http://127.0.0.1:3007");
      }
    },

    // 上传到服务器 
    submitUpload() {
      this.$refs.upload.submit();
    },
    
    // 添加商品按钮
    reg() {
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post("/add", this.shop);
        if (res.status !== 200)
          return this.$message.error("添加失败！此类商品已有！");
        this.$message.success("添加成功！");
        // 刷新页面
        window.location.reload();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.imag {
  position: absolute;
  width: 450px;
  top: 11px;
  left: 533px;
}
.td {
  position: absolute;
  cursor: pointer;
  top: 30px;
  right: 50px;
  color: #fff;
  background-color: #b71c1c;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 6px;
  border: 2px solid #b71c1c;
}
.sy {
  position: absolute;
  cursor: pointer;
  top: 30px;
  left: 50px;
  color: #fff;
  background-color: #b71c1c;
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 6px;
  border: 2px solid #b71c1c;
}
.ipt {
  position: absolute;
  top: 68px;
  left: 20px;
  height: 37px;
  width: 85%;
}
.price {
  position: absolute;
  width: 300px;
  height: 200px;
  top: 250px;
  left: 400px;
  background-color: #fff;
  border: 3px solid #b71c1c;
  border-radius: 6px;
  .sure,
  .no {
    cursor: pointer;
    font-size: 12px;
    position: absolute;
    width: 40px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 2px solid #b71c1c;
    border-radius: 6px;
  }
  .sure:hover,
  .no:hover {
    color: #fff;
    background-color: #b71c1c;
  }
  .sure {
    top: 152px;
    left: 130px;
  }
  .no {
    top: 7px;
    right: 12px;
  }
}

.upd:hover {
  cursor: pointer;
  color: #fff;
  background-color: #b71c1c;
}
tr,
th,
td {
  border: #b71c1c 1px solid;

  // border-radius: 8px;
}

table,
td,
th {
  border-collapse: collapse;
}

table {
  font-size: 14px;
  margin-top: 30px;
  margin-left: 30px;
  margin-bottom: 30px;
  width: 95%;
  tr {
    width: 33%;
    text-align: center;
  }
}

body {
  border-top: 5px solid #b71c1c;
}
div {
  user-select: none;
}
.btn {
  margin-left: 146px;
  margin-top: 56px;
}
.form {
  position: absolute;
  top: 60px;
  left: 1px;
  width: 96%;
}
.a {
  position: relative;
  left: 300px;
  top: 100px;
  width: 1100px;
  height: 573px;
  overflow: auto;
  color: #b71c1c;
  border: 4px solid #b71c1c;
}
.b:hover {
  color: #fff;
  background-color: #b71c1c;
}

.b {
  cursor: pointer;
  position: absolute;
  width: 100px;
  height: 30px;
  top: 524px;
  left: 500px;
  border: 2px solid #b71c1c;
  text-align: center;
  line-height: 30px;
  border-radius: 6px;
}

.e {
  z-index: 1;
  cursor: pointer;
  position: absolute;
  width: 60px;
  height: 30px;
  top: 7px;
  left: 484px;
  border: 2px solid #b71c1c;
  text-align: center;
  line-height: 30px;
  border-radius: 6px;
}

.e:hover {
  color: #fff;
  background-color: #b71c1c;
}

.c {
  position: absolute;
  top: 100px;
  left: 20px;
  width: 200px;
  border-radius: 10px;
}
.d {
  position: absolute;
  top: 5px;
  left: 266px;
  width: 560px;
  height: 485px;
  border-radius: 6px;
  border: 2px solid #b71c1c;
  border-radius: 6px;
  background-color: #fff;
}
</style>>
